<template>
  <pc-nav></pc-nav>

    <!-- 空注册页 -->
    <view class=" main ss-flex ss-row-center">
        <div class="left ss-row-center ss-radius-20">
          <image class="ss-flex-1 ss-flex ss-radius-20" style="width: 490px; height: 500px;" mode="aspectfill" src="/static/images/login-bg-s.png">
          </image>
        </div>

      <div class="right ss-row-right ss-radius-bottom-right-20 ss-radius-top-right-20">
        <div class="login-box-user">
          <div class="ss-flex" style="margin-top: 30px; width: 80%; margin-left: 50px;">
            <a class="ss-flex-1 pass-login" style="cursor: pointer;">账号注册</a>
            <view class="head-subtitle" style="color: #999999">请使用本人手机号完成注册</view>
          </div>

          <view class="ss-flex-1 ss-row-center ss-items-center pass-login-con" style="margin-top: 40px; display: block;">
            <uni-forms
              ref="smsRegisterRef"
              v-model="state.model"
              :rules="state.rules"
              validateTrigger="bind"
              labelWidth="140"
              labelAlign="center"
            >
              <input
                type="number"
                class="uni-input ss-flex user  ss-row-center ss-items-center"
                placeholder="请输入手机号"
                v-model="state.model.mobile"
              />

              <div class="ss-flex" style="margin-bottom: 20px; margin-top: 20px;">
                <input type="text" name="code" maxlength="4" v-model="state.model.code" class="uni-input user ss-flex-1 ss-row-center" style="margin-left: 50px; margin-right: 10px;" placeholder="验证码" />
                <button
                  :disabled="state.isMobileEnd"
                  :class="{ 'code-btn-end': state.isMobileEnd }"
                  @tap="getSmsCode('smsRegister', state.model.mobile)"
                  class="sms-btm">
                  {{ getSmsTimer('smsRegister') }}
                </button>
              </div>
              <input
                type="password"
                class="uni-input ss-flex user ss-row-center ss-items-center"
                placeholder="密码（6-16位，必含：字母、数字）"
                v-model="state.model.password"
              />

            <button type="primary" @tap="smsRegisterSubmit()" class="ss-rest-button ss-r-14 user ui-Shadow-Main">注册</button>
              <view style="width:75%; margin: 0 auto; justify-content: space-between" class="ss-flex">
                <view @tap="gourl('/pages/index/login')">返回登录</view>
                <view>忘记密码？</view>
              </view>
              <view style="width:75%; margin: 0 auto; justify-content: space-between" class="ss-flex">
                <view class="jhs-zhucep">注册代表您已经阅读并同意<view class="jhs-zhucep-span" @tap="zhucep()">《计划社用户协议》</view>及<view class="jhs-zhucep-span" @tap="zhucey()">《隐私协议》</view></view>

              </view>
            </uni-forms>
          </view>
        </div>

      </div>
    </view>
  <div class="container-fluid mb-3">
    <pc-footer></pc-footer>
  </div>
  <zhuce ref="downloadPopup" />
  <yinsi ref="downloadPopupy" />

</template>

<script setup>
  import { computed, ref, reactive, unref } from 'vue';
  import sheep from '@/sheep';
  import { code, mobile, password } from '@/sheep/validate/form';
  import { showAuthModal, closeAuthModal, getSmsCode, getSmsTimer } from '@/sheep/hooks/useModal';
  import PcNav from '@/sheep/components/pc-nav/pc-nav.vue';
  import PcFooter from '@/sheep/components/pc-footer/pc-footer.vue';
  import UniForms from '@/uni_modules/uni-forms/components/uni-forms/uni-forms.vue';
  import zhuce from '@/pages/index/components/zhuce.vue';
  import yinsi from '@/pages/index/components/yinsi.vue';
  import DownloadMaterial from '@/pages/user/components/download-material.vue';
  const props = defineProps({
    agreeStatus: {
      type: Boolean,
      default: false,
    },
  });

  const smsRegisterRef = ref(null);

  const isLogin = computed(() => sheep.$store('user').isLogin);

  const emits = defineEmits(['onConfirm']);
  const downloadPopup = ref(null);
  const downloadPopupy = ref(null)
  // 数据
  const state = reactive({
    isMobileEnd: false, // 手机号输入完毕
    model: {
      mobile: '', // 手机号
      code: '', // 验证码
      password: '', // 密码
    },
    rules: {
      code,
      mobile,
      password,
    },
  });
  // 3.短信注册
  async function smsRegisterSubmit() {
    const validate = await unref(smsRegisterRef)
      .validate()
      .catch((error) => {
        console.log('error: ', error);
      });
    if (!validate) return;

    /*if (!props.agreeStatus) {
      emits('onConfirm', true);
      sheep.$helper.toast('请勾选同意');
      return;
    }*/

    const { code } = await sheep.$api.user.smsRegister({
      ...state.model,
      shareInfo: uni.getStorageSync('shareLog') || {},
    });
    if (code === 1) {
      gourl("/pages/index/index");
    }
  }

  const openMaterialDownloadPopup = (row) => {
    materialsList.value = row.all_lessons.filter(item => item.lesson_type == '2');
    if (materialsList.value.length > 0) {
      downloadPopup.value.showPopup();
    }
  }

  function gourl(url){
    //alert("22")
    sheep.$router.go(url);
  }

  function zhucep(){
    downloadPopup.value.showPopup();
  }
  function zhucey(){
    downloadPopupy.value.showPopup();
  }



</script>


<style scoped>
  html, body{
    height: none !important;
  }
  .sms-btm{
    width: 150px;
    margin-right: 50px;
    margin-bottom: 10px;
    margin-left: 10px;
    color: #666666;
  }
  uni-page-body{
    background-color: #f6f6f6 !important;
  }
  .pass-login, .sms-login{
    font-size: 20px;
    color: #0C1A29;
    font-weight: bold;
    text-decoration: none;
  }
  .redfont{
    color: #0c53bf;
  }

  .main{
    width: 1200px;
    margin: 0 auto;
    /*height: calc(100vh - 389px);*/
    height: 500px;
    margin-top: 30px;
    margin-bottom: 30px;
  }
  .left, .right{
    width: 490px;
    background-color: #FFFFFF;
    height: 500px;
  }
  .right{
    margin-left: 0px;
    position: relative;
    padding-top: 60px;
  }

  .user{
    font-size: 16px;
    width: 80%;
    display: block;
    box-sizing: border-box;
    margin: 0 auto;
    margin-bottom: 10px;
  }
  .password{
    font-size: 16px;
  }

  .uni-input{
    border: 1px #e4e4e4 solid;
    padding: 10px;
    height: 46px;
    line-height: 36px;
  }
  button{
    height: 46px;
    line-height: 46px;
  }
  .login-box{
    position: absolute;
    top: 3px;
    right: 3px;
  }
  .ewm-ico, .input-ico{
    cursor: pointer;
  }
  .jhs-zhucep{
    font-size: 13px;
    line-height: 32px;
  }
    .jhs-zhucep-span{
      color: #0c53bf !important;
      display: inline;
    }


</style>
